<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hello</title>
</head>
<body>
	<!-- 准备好容器 -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script src="../lib/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作dom -->
	<script src="../lib/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script src="../lib/babel.min.js"></script>

	<script type="text/babel"> /* 此处一定要写babel，表示里面写的不是js，而是jsx，靠babel翻译 */
		/*
    // 1.创建虚拟DOM
		const VDOM = (
      <h2 id="atguigu">
        <span>Hello react</span>
      </h2>
    )
    */
    
    /*
    // 1.创建虚拟DOM
    const myId = "atguigu";
    const myData = "hello world";
		const VDOM = (
      <h2 id={myId}>
        <span>{myData}</span>
      </h2>
    )
    */

    // 1.创建虚拟DOM
    const myId = "atguigu";
    const myData = "hello world";
		const VDOM = (
      <div>
        <h2 id={myId} className="title" style={{color: 'red', fontSize: '30px'}}>
          <span>{myData}</span>
        </h2>
        <span>这是第二行</span>
      </div>
    )

		// 2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById('test'));

    /*
    jsx语法规则
      1.创建虚拟DOM时，不要写引号。
      2.标签中混入js表达式时要用{}。
      3.class使用className代替，因为class是es6中的保留字。
      4.内联样式style样式必须写成对象形式，属性名是驼峰命名法。
      5.虚拟DOM只能有一个根标签。
      6.标签必须闭合。
      7.标签首字母
        （1）.若小写字母开头，则将标签转为html同名元素，若html中没有该元素，则报错。
        （2）.若大写字母开头，react会创建对应的组件，若该组件没有定义，则报错。
    */

	</script>
</body>
</html>